<template>
  <el-card shadow="never" :style="cardStyle">
    <slot name="header" />
    <el-table :data="tableData" v-bind="children" border stripe style="width: 100%" show-overflow-tooltip :height="height"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="60" v-if="selection" />
      <el-table-column type="index" label="序号" align="center" width="80" v-if="showIndex" />
      <el-table-column v-for="(propItem, index) in propList" :key="index" v-bind="propItem" align="center">
        <template #default="scope">
          <slot :name="propItem.slot" :row="scope.row">
            <div class='line2'>
              {{
                scope.row[propItem.prop] || '-'
              }}
            </div>
          </slot>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="pagination" class="flex justify-end mt-5">
      <el-pagination v-model:current-page="paginationConfig.currentPage" v-model:page-size="paginationConfig.pageSize"
        :page-sizes="[5, 10, 20, 30]" :small="small" :disabled="disabled" :background="background" :layout="layout"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ITableItemProp } from "../types";
import { PropType, ref } from "vue";

const props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  propList: {
    type: Array as PropType<ITableItemProp[]>,
    required: true
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  selection: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Boolean,
    default: true
  },
  cardStyle: {
    type: Object,
    default: () => ({ marginTop: "20px" })
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper"
  },
  total: {
    type: Number,
    default: 0
  },
  paginationConfig: {
    type: Object,
    default: () => ({ currentPage: 0, pageSize: 10 })
  },
  height: {
    type: [Number, String],
    default: "auto"
  },
  children: {
    type: Object,
    default: () => ({})
  }
});


const emit = defineEmits([
  "selectionChange",
  "handleSizeChangeFn",
  "handleCurrentChangeFn"
]);

const handleSelectionChange = (val: any) => emit("selectionChange", val);

// 分页
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (pageSize: number) =>
  emit("handleSizeChangeFn", pageSize);
const handleCurrentChange = (currentPage: number) =>
  emit("handleCurrentChangeFn", currentPage);
</script>

<style scoped>
.line2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}
</style>
